import React from 'react';
import './index.scss'
import { Droppable } from "react-beautiful-dnd"
import Item from '../Item/index'

function App(props) {
  const { doneData, deleteItemById } = props
  return (
    <div className='done-container'>
      <div className='list-title'>done</div>
      {/* ------------------可拖拽框---------------- */}
      <Droppable droppableId='myDoneList' direction="vertical">
        {(provided) => (
          <div className='list-body'
            ref={provided.innerRef}
            {...provided.droppableProps} >
            {/* -------------渲染列表项----------- */}
            {doneData.map((item, index) => {
              return (<Item key={item.id} data={item} index={index} deleteItemById={deleteItemById} />)
            })}

            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </div>
  );
}

export default App;